<template>
	<div class="login-bg">
		<div class="login">
			<div class="login-box">
				<!-- <h1>家具大师后台管理系统</h1> -->
				<!-- <img class="logo-title" src="../../assets/image/login_images/logo_title.png" alt="" /> -->
				<ul>
					<el-select style="width: 100%;" v-model="identity" placeholder="请选择身份登录">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<template v-if="type">
						<li style="margin-top: 20px;">
							<el-input v-model="loginForm.user_name" placeholder="请输入用户名">
								<template slot="prepend">
									<i class="iconfont icon-xingmingyonghumingnicheng"></i>
								</template>
							</el-input>
						</li>
						<li>
							<el-input type="password" v-model="loginForm.password" placeholder="请输入密码" @keyup.enter.native="login()">
								<template slot="prepend">
									<i class="iconfont icon-icon-"></i>
								</template>
							</el-input>
						</li>
					</template>
					<template v-else>
						<li>
							<el-input v-model="phoneForm.phone" placeholder="请输入手机号码">
								<template slot="prepend">
									<i class="iconfont icon-shoujihaoma"></i>
								</template>
							</el-input>
						</li>
						<li>
							<el-input type="text" v-model="phoneForm.code" placeholder="请输入验证码">
								<template slot="prepend">
									<i class="iconfont icon-yanzhengma"></i>
								</template>
								<template slot="append">
									<span style="cursor: pointer;" @click="onOpenDialog" :class="[{ isSend: isSend }]">
										<span v-if="!isSend">获取验证码</span>
										<span v-else>{{ count }} S</span>
									</span>
								</template>
							</el-input>
						</li>
					</template>
					<li>
						<el-button type="primary" @click="login()">登录</el-button>
					</li>
				</ul>
				<div class="changType">
					<el-link type="primary" @click="changType">{{ type ? '手机号码登录' : '账号密码登录' }}</el-link>
				</div>
			</div>
		</div>
		<el-dialog
			title="提示"
			:visible.sync="identifying_code"
			width="400px"
			@close="onClose"
			>
			<div class="dialog">
				<input
					placeholder="请输入图中验证码"
					maxlength="4"
					v-model="captcha"
					@keydown.13="send_code"
					class="dialog-input"
				/>
				<img :src="base64" alt="" @click="onOpenDialog" />
				<div class="btn">
					<button @click="send_code">获取验证码</button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
						value: '1',
						label: '总部'
					}, 
					// {
					// 	value: '2',
					// 	label: '分公司'
					// },
					{
						value: '3',
						label: '商家'
					},
					{
						value: '4',
						label: '工厂'
					}
				],
				identity: localStorage.getItem('identity') == null ? '' : localStorage.getItem('identity'),
				down: null,
				type: true,
				loginForm: {
					user_name: '',
					password: ''
				},
				phoneForm: {
					phone: '',
					code: ''
				},
				isSend: false,
				count: 60,
				identifying_code:false,
				captcha:'',
				base64:''
			};
		},
		methods: {
			//乘法函数
			accMul(arg1, arg2) {
				let m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split('.')[1].length;
				} catch (e) {}
				try {
					m += s2.split('.')[1].length;
				} catch (e) {}
				return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m);
			},
			accAdd(arg1, arg2) {
				var r1, r2, m, c;
				try {
					r1 = arg1.toString().split('.')[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split('.')[1].length;
				} catch (e) {
					r2 = 0;
				}
				c = Math.abs(r1 - r2);
				m = Math.pow(10, Math.max(r1, r2));
				if (c > 0) {
					var cm = Math.pow(10, c);
					if (r1 > r2) {
						arg1 = Number(arg1.toString().replace('.', ''));
						arg2 = Number(arg2.toString().replace('.', '')) * cm;
					} else {
						arg1 = Number(arg1.toString().replace('.', '')) * cm;
						arg2 = Number(arg2.toString().replace('.', ''));
					}
				} else {
					arg1 = Number(arg1.toString().replace('.', ''));
					arg2 = Number(arg2.toString().replace('.', ''));
				}
				return (arg1 + arg2) / m;
			},
			coutDown() {
				this.down = setInterval(() => {
					this.count--;
					if (this.count < 1) {
						clearInterval(this.down);
						this.count = 60;
						this.isSend = false;
					}
				}, 1000);
			},
			onOpenDialog(){
				if (this.isSend) {
					return false;
				}

				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[8-9])\d{8}$/;
				if (!phoneRexp.test(this.phoneForm.phone)) {
					this.$layer.msg('请输入正确的手机号码');
					return false;
				}
				this.$http(this.$ApiList.GetCode).then(res=>{
					this.base64 = res.datas
					this.identifying_code = true;
				})
			},
			// 发送短信
			send_code() {
				let data = {
					phone: this.phoneForm.phone,
					login_code: 'login',
					captcha:this.captcha
				};
				this.$http(this.$ApiList.PhoneGetCode, data).then(res => {
					this.$message.success(res.datas)
					this.isSend = true;
					this.identifying_code = false;
					this.captcha = ''
					this.coutDown();
				});
			},
			login() {
				if (this.identity === '') {
					this.$layer.msg('请选择身份登录');
					return
				}
				localStorage.setItem('identity', this.identity)

				this.loginForm.login_type = this.identity
				

				if (this.type) {
					if (!this.loginForm.user_name) {
						this.$layer.msg('请输入用户名');
					} else if (!this.loginForm.password) {
						this.$layer.msg('请输入密码');
					} else {
						this.$http(this.$ApiList.adminLogin, this.loginForm).then(res => {
							this.$layer.msg('登录成功');
							this.$store.dispatch('tagsView/delAllViews').then(({
								visitedViews
							}) => {
								const latestView = visitedViews.slice(-1)[0];
							});

							localStorage.setItem('user_name', this.loginForm.user_name);
							localStorage.setItem('menu', window.JSON.stringify(res.datas.menu.menu));
							localStorage.setItem('adminName', res.datas.menu.role.name);
							localStorage.setItem('token', res.datas.token);
							localStorage.setItem('admin_id', res.datas.admin_id);
							localStorage.setItem('user_id', res.datas.user_id);
							localStorage.setItem('factory_id', res.datas.factory_id);
							localStorage.setItem('admin_type', res.datas.admin_type);
							localStorage.setItem('factory_type', res.datas.factory_type);
							localStorage.setItem('filiale_id', res.datas.filiale_id);

							if (res.datas.admin_type == 1) {
								localStorage.setItem('store_id', 1); // 让商户也可以看平台的一些数据分析
							} else {
								localStorage.setItem('store_id', res.datas.store_id);
							}
							localStorage.setItem('shop_id', res.datas.store_id); // 针对某些需要用到店铺ID获取数据的接口
							localStorage.setItem('factory_sn', res.datas.factory_sn);

							setTimeout(() => {
								clearInterval(this.down);
								this.$router.push(res.datas.menu.menu[0].lower[0].link);
							}, 500);
						});
					}
				} else {
					if (!this.phoneForm.phone) {
						this.$layer.msg('请输入手机号码');
					} else if (!this.phoneForm.code) {
						this.$layer.msg('请输入验证码');
					} else {
						let data = {
							phone: this.phoneForm.phone,
							code: this.phoneForm.code
						};
						data.login_type = this.identity
						this.$http(this.$ApiList.phoneLogin, data).then(res => {
							this.$store.dispatch('tagsView/delAllViews').then(({
								visitedViews
							}) => {
								const latestView = visitedViews.slice(-1)[0];
							});
							localStorage.setItem('user_name', this.phoneForm.phone);
							localStorage.setItem('menu', window.JSON.stringify(res.datas.menu.menu));
							localStorage.setItem('adminName', res.datas.menu.role.name);
							localStorage.setItem('token', res.datas.token);
							localStorage.setItem('admin_id', res.datas.admin_id);
							localStorage.setItem('user_id', res.datas.user_id);
							localStorage.setItem('factory_id', res.datas.factory_id);
							localStorage.setItem('admin_type', res.datas.admin_type);
							localStorage.setItem('factory_type', res.datas.factory_type);
							if (res.datas.admin_type == 1) {
								localStorage.setItem('store_id', 1);
							} else {
								localStorage.setItem('store_id', res.datas.store_id);
							}
							localStorage.setItem('shop_id', res.datas.store_id); // 针对某些需要用到店铺ID修改资料
							localStorage.setItem('factory_sn', res.datas.factory_sn);
							localStorage.setItem('filiale_id', res.datas.filiale_id);
							this.$layer.msg('登录成功');

							setTimeout(() => {
								clearInterval(this.down);
								this.$router.push({
									path: '/index'
								});
							}, 500);
						});
					}
				}
			},
			changType() {
				this.type = !this.type;
			},
			onClose(){
				this.captcha = '';
				this.identifying_code = false
			}
		},
		created() {
			if (localStorage.getItem('token')) {
				this.$router.push({
					path: '/index'
				})
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.login-bg {
		height: 100vh;
		min-height: 600px;
		background: url(../../assets/image/login_images/background.png) center center fixed no-repeat;
		background-size: cover;
	}

	.login {
		max-width: 90%;
		width: 350px;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		padding: 20px;
		text-align: center;

		.isSend {
			opacity: 0.5;
		}

		h1 {
			font-weight: normal;
			font-size: 18px;
		}

		.logo-title {
			display: block;
			margin: 0 auto;
			margin-top: -48px;
			width: 200px;
		}

		ul li {
			margin-top: 30px;
			display: flex;
			align-items: center;

			.el-input {
				flex: 1;
			}

			img {
				width: 80px;
				height: 40px;
				margin-left: 10px;
			}

			.el-button {
				flex: 1;
			}
		}

		.changType {
			margin-top: 15px;
		}
	}
	.el-dialog__title{
	font-size: 14px;
  }
  .dialog {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	::-webkit-input-placeholder {
		color: #cccccc;
	}
    .dialog-input {
      margin-right: 36px;
      width: 200px;
      padding: 10px;
      background-color: #f8f8f8;
      border-radius: 4px;
      border: solid 1px #f2f2f2;
    }
	.dialog-input:focus {
		outline: none;
		border: 1px solid #34a1e0;
	}
	img{
		width: 120px;
	}
    .btn {
      width: 100%;
      text-align: center;
      button {
		  border: none;
        margin-top: 30px;
        width: 100px;
        height: 32px;
        line-height: 32px;
        background-color:#3c8dbc ;
        color: #fff;
		cursor: pointer;
      }
    }
  }
</style>
